<template>
  <ContentBase>
      <div class="row">
        <div class="col-3">
          <UserProfileInfo @follow="follow" @unfollow="unfollow" :user="user" />
          <UserProfileWrite v-if="is_me" @post_a_post="post_a_post" />
        </div>
        <div class="col-9">
          <UserProfilePosts :user="user" :posts="posts" @delete_a_post="delete_a_post" />
        </div>
      </div>
  </ContentBase>
</template>

<script>
import ContentBase from '../components/ContentBase'
import UserProfileInfo from '../components/UserProfileInfo';
import UserProfilePosts from '../components/UserProfilePosts';
import UserProfileWrite from '../components/UserProfileWrite';
import { reactive } from 'vue';
import { useRoute } from 'vue-router';
import $ from 'jquery';
// import { useStore } from 'vuex';
import { computed } from 'vue';

export default {
  name: 'UserList',
  components: {
      ContentBase,
      UserProfileInfo,
      UserProfilePosts,
      UserProfileWrite
  },
  setup() {
    // const store = useStore();
    const route = useRoute();
    const userId = parseInt(route.params.userId);
    const user = reactive({});
    const posts = reactive({});

    $.ajax({
      url: "/api/userlist",
      type: "GET",
      data: {
        id: userId,
      },
      success(resp) {
        console.log(resp)
        user.id = resp[0].id;
        user.username = resp[0].username;
        user.photo = resp[0].photo;
        user.followerCount = resp[0].followerCount;
        let list = localStorage.getItem('login_user_followedUser').split(",").map(Number);
        console.log(list)
        user.is_followed = false;
        for (let i = 0; i < list.length; ++i) {
          if (userId == list[i]) {
            user.is_followed = true;
          }
        }
      }
    });

    $.ajax({
      url: "/api/posts",
      type: "GET",
      data: {
        user_id: userId,
      },
      success(resp) {
        console.log(resp)
        posts.count = resp.length;
        posts.posts = resp;
      }
    });

    const follow = () => {
      if (user.is_followed) return;
      user.is_followed = true;
      user.followerCount ++ ;
    };

    const unfollow = () => {
      if (!user.is_followed) return;
      user.is_followed = false;
      user.followerCount -- ;
    };

    const post_a_post = content => {
      posts.count ++ ;
      posts.posts.unshift({
        id: posts.count,
        userId: 1,
        content: content,
      })
    };

    const delete_a_post = post_id => {
      posts.posts = posts.posts.filter(post => post.id !== post_id);
      posts.count = posts.posts.length;
    }
    // console.log(userId, store.state.user.id)

    console.log(userId,parseInt(localStorage.getItem("login_user_id")))
    const is_me = computed(() => userId === parseInt(localStorage.getItem("login_user_id")));
    console.log(is_me)
    return {
      user,
      follow,
      unfollow,
      posts,
      post_a_post,
      delete_a_post,
      is_me,
    }
  }
}
</script>

<style scoped>
</style>
